<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>register</title>
    <link rel="stylesheet" href="login.css">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_1779796_5nx07je1vd6.css">
</head>

<body>
    <div class="tbody">
        <div class="shadow">
            <div class="shadow_left clear">
                <img src="img/logo.svg" alt="">
                <h2 class="left_title">
                    云端软件开发协作平台
                </h2>
                <div class="left_content clear">
                    <div class="left_name">
                        <span>韩卿</span>
                        <span>Apache Kylin</span>
                    </div>
                    <div class="left_contents">
                        Gitee 为中国开发者提供了更好的本地化能力和服务，在促进中国开源发展上贡献巨大，非常期待 Gitee 更上层楼。
                    </div>


                </div>
                <div class="left_footer clear">
                    <hr class="hr" />
                    <span class="myqyb">码云企业版</span>
                    <span class="jian">-</span>
                    企业级软件协作开发管理平台
                </div>
            </div>
            <div class="shadow_right">
                <div class="form clear">
                    <div class="form_header">
                        <span class="register_title">登陆</span>
                        <span class="login_title">
                            <span class="haveaccount">没有账号?</span>
                            <a href="register.html">点此注册</a>
                        </span>
                    </div>
                    <div class="proving" id="div_name">
                        <input class="register_name" id="register_name" type="text" placeholder="手机号码">
                        <div class="message message_name"></div>
                        <i class="icon iconfont icon-cha-copy err_name"></i>
                    </div>
                    <div class="proving" id="div_host">
                        <div id="mrhost">
                            <input class="register_zone" id="register_zone" type="text" placeholder="手机验证码"
                                disabled="true">
                            <button class="yzm_submit">发送验证码</button>
                        </div>
                        <div class="message message_zone"></div>
                        <i class="icon iconfont icon-cha-copy err_zone"></i>
                    </div>


                    <div class="xieyi">
                        <input type="checkbox" class="xieyi_check">
                        <div class="xie_word">记住我
                        </div>
                        <div class="register_case">
                            <a href="">用户名密码登录</a>
                        </div>
                    </div>
                    <div class="register_btn">
                        <button class="submit">登录</button>
                    </div>
                    <div class="yyzh">
                        <a href="">已有帐号，忘记密码？</a>
                    </div>
                    <div class="osLogin clear">
                        <div class="oschina">
                            <img src="img/oschina.png" alt="">
                            <span> 使用 OSChina 帐号登录</span>
                        </div>
                        <div class="otherLogin clear">
                            <hr />
                            <p>其他方式登陆</p>
                        </div>
                        <div class="logins">
                            <img src="img/weixin.png" alt="">
                            <img src="img/QQ.png" alt="">
                            <img src="img/github.png" alt="">
                            <img src="img/other.png" alt="">
                        </div>
                    </div>
                </div>
                <div class="yzm_form">
                    <div class="yzm_bg">
                        <h2 class="yzm_title">机器验证</h2>
                        <div class="clear">
                            <div class="yzm_zm"></div>
                            <input class="yzm_input" placeholder="请输入上方的图形验证码">
                            <button class="yzm_yz" disabled="disabled">验证</button>
                            <div class="yzm_err">验证码不匹配</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer clear">
            <span class="lianjie clear">
                <a href="">© Gitee.com</a>
                <a href="">关于我们</a>
                <a href="">使用条款</a>
                <a href="">帮助文档</a>
                <a href="">在线自助服务</a>
                <a href="">©重发激活邮件</a>
            </span>
        </div>
    </div>
</body>
<script>
    var nameflag = false
    var username = document.querySelector(".register_name");
    var usernameReg = /^1[356789][0-9]{9}$/g
    username.onblur = function () {
        var usernameValue = username.value
        var usernameFlag = listReg(usernameReg, usernameValue, "name", "手机号码格式不正确")
    }

    function listReg(reg, str, type, word) {
        var message = document.querySelector(`.message_${type}`)
        var errr = document.querySelector(`.err_${type}`)
        if (str == "") {
            var errtitle = ""
            if (type == "name") {
                errtitle = "手机号"
            }
            message.innerHTML = `${errtitle}为必填项`
            errr.style.display = "inline"
        } else {
            if (reg.test(str)) {
                message.innerHTML = ""
                if (type == "name") {
                    nameflag = true
                }
                return true
            } else {
                message.innerHTML = word
                if (type == "name") {
                    nameflag = false
                }
                return false
            }
        }
    }
    var yzmBtn = document.querySelector(".yzm_submit")
    yzmBtn.onclick = function () {
        if (nameflag) {
            yzmForm.style.display = "block"
            return true
        } else {
            console.log("发送失败")
            return false
        }
    }

    var registerBtn = document.querySelector(".submit")

    var checkCode = document.querySelector(".yzm_zm");
    checkCode.onclick = function () {
        createCode()
    }
    function createCode() {
        code = "";
        var codeLength = 6;
        var random = new Array('a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r',
            's', 't', 'u', 'v', 'w', 'x', 'y', 'z');
        for (var i = 0; i < codeLength; i++) {
            var index = Math.floor(Math.random() * 26);
            code += random[index];
        }
        checkCode.innerHTML = code;
    }
    createCode()
    var yzmInput = document.querySelector('.yzm_input')
    var yzmYz = document.querySelector(".yzm_yz")
    yzmInput.addEventListener('input', function () {
        if (this.value.length == 6) {
            yzmYz.disabled = false
            yzmYz.classList.add("disable")
        } else {
            yzmYz.disabled = true
            yzmYz.classList.remove("disable")
        }
        console.log(yzmYz.disabled)
    });
    var yzmErr = document.querySelector(".yzm_err")
    var yzmForm = document.querySelector(".yzm_form")
    var registerZone = document.querySelector(".register_zone")
    yzmErr.display = "none"

    yzmYz.onclick = function () {
        if (yzmInput.value == checkCode.innerHTML) {
            yzmErr.style.display = "none"
            yzmForm.style.display = "none"
            yzmInput.value = ""
            createCode()
            yzmBtn.innerHTML = "已发送"
            var time = 60
            var timer = setInterval(function () {
                time--
                yzmBtn.innerHTML = `${time}秒后可重发`
                yzmBtn.style.disabled = true
                if (time == 0) {
                    yzmBtn.style.disabled = false
                    yzmBtn.innerHTML = `重发验证码`
                    window.clearInterval(timer)
                }
            }, 1000)
            registerZone.disabled = false

        } else {
            console.log(yzmErr.display)
            yzmErr.style.display = "block"

        }
    }
</script>

</html>